{% extends "./inc/appbase.html" %}
{%block style%}
<link rel="stylesheet" href="/static/mobile/css/mui.picker.min.css">
<style>
    .mui-table h4,
    .mui-media-body h4 {
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
    <form id="formMembership" method="get" class="form-recharge">
        <div class="mui-card">
            <ul class="mui-table-view">
                <li class="mui-table-view-divider">选择会员信息</li>
                <li class="mui-table-view-cell padding-10">
                    <div id="memberGroupSelect" class="memberGroupSelect mui-navigate-right text-muted">请选择会员类型</div>
                    <input id="memberGroupInput" type="hidden" name="groupId" />
                </li>
                <li class="mui-table-view-cell padding-10">
                    <div class="memberGroupSelect mui-navigate-right text-muted">价格:<span class="text-danger"
                            id="showPrice">￥0.00元</span></div>
                    <input id="buyPrice" type="hidden" name="price" value="0" />
                </li>
            </ul>
        </div>
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <button type="submit" class="mui-btn mui-btn-primary mui-btn-block" id="pay">下一步</button>
        </div>
    </form>
</div>

{% endblock%}

{% block script %}
<script src="/static/mobile/js/mui.picker.min.js"></script>
<script>
    var memberGroupSelect = $('#memberGroupSelect');
    var memberGroupInput = $('#memberGroupInput');
    var showPrice = $('#showPrice');
    var buyPrice = $('#buyPrice');
    var memberGroupPicker = new mui.PopPicker();
    memberGroupPicker.setData({{ memberGroupPicker | dump | safe }});
    memberGroupSelect.on('tap', function () {
        memberGroupPicker.show(function (selectItems) {
            memberGroupSelect.html(selectItems[0].text);
            memberGroupInput.val(selectItems[0].value);
            getPrice();
        });
    });
    function getPrice() {
        showPrice.html('正在计算价格...');
        $.ajax({
            url: '/center/account/upgrade?step=1',
            method: 'get',
            data: $('#formMembership').serialize(),
            dataType: 'json',
            success: function (res) {
                if (res.errno) {
                    mui.toast(res.errmsg);
                    showPrice.html('￥0.00元');
                    return;
                }
                var data = res.data;
                showPrice.html('当前会员价值 ￥' + data.old + '元, 选择的会员价值 ￥' + data.new + '元, 需要补差价 ￥' + data.upgrade + '元');
                buyPrice.val(data.upgrade);
            },
            error: function (e) {
                mui.toast('计算价格发生错误');
            }
        });
    };
    $('#formMembership').submit(function () {
        $.ajax({
            url: '/center/account/upgrade?step=2',
            method: 'get',
            data: $('#formMembership').serialize(),
            dataType: 'json',
            success: function (res) {
                if (res.errno) {
                    mui.toast(res.errmsg);
                    return;
                }
                mui.toast(res.data);
                setTimeout(function () {
                    window.location = '/center/index';
                }, 3000);
            },
            error: function (e) {
                mui.toast('计算价格发生错误');
            }
        });
        return false;
    });
</script>
{% endblock %}